import videojs from 'video.js';
import './index.scss'
import htmlElementUtils from "../../../htmlElementUtils";

export class PlaybackRatesZhiXin extends videojs.getComponent('Component') {
  constructor(player: videojs.Player, options: number[], ready?: videojs.Component.ReadyCallback) {
    super(player, options as videojs.ComponentOptions, ready);
    this.on('click', this.elClick)
    this.showDialog = false
    const dom = this.el();
    const htmlSpanElement = document.createElement('span');
    this.textSpan = htmlSpanElement
    dom.appendChild(htmlSpanElement)
    this.setContentShow(this.rate)
    this.dialogEL = document.createElement('div')
    htmlElementUtils.addClass(this.dialogEL, 'vjs-PlaybackRatesZhiXin-dialog')
    dom.appendChild(this.dialogEL)
    this.updateDialogEL(options)
    player.on('userinactive', () => {
      this.dialogHidden()
    })

    player.on('play', () => {
      this.rateCLick(this.rate)
    })
  }

  private showDialog: boolean;

  private elClick() {
    if (this.showDialog) {
      this.dialogHidden()
    } else {
      this.dialogShow()
    }
  }


  private setContentShow(rate: number) {
    if (this.textSpan)
      this.textSpan.textContent = rate + 'x'
  }

  createEl(tagName?: string, properties?: any, attributes?: any): Element { // 这个比构造函数执行还早，
    return videojs.dom.createEl('div', {
      className: 'vjs-PlaybackRatesZhiXin'
    }) as HTMLDivElement
  }

  private dialogShow() {
    if (this.dialogEL) {
      htmlElementUtils.addClass(this.dialogEL, 'vjs-PlaybackRatesZhiXin-dialog-active')
    }
    this.showDialog = true
  }

  private dialogHidden() {
    if (this.dialogEL) {
      htmlElementUtils.removeClass(this.dialogEL, 'vjs-PlaybackRatesZhiXin-dialog-active')
    }
    this.showDialog = false
  }

  private textSpan: HTMLSpanElement | undefined
  private rate: number = 1
  private dialogEL: HTMLDivElement | undefined

  private getOptions(): number[] {
    return this.options_ as number[]
  }

  private rateCLick(rate: number) {
    this.rate = rate
    this.player().playbackRate(rate)
    this.setContentShow(rate)
    this.updateDialogEL(this.getOptions())
    this.dialogHidden()
  }

  private updateDialogEL(val: number[]) {
    if (!val) {
      return
    }
    if (this.dialogEL) {
      this.dialogEL.innerText = ''
      val.forEach(i => {
        const htmlDivElement = document.createElement('div');
        htmlElementUtils.addClass(htmlDivElement, 'vjs-PlaybackRatesZhiXin-item')
        if (i === this.rate) {
          htmlElementUtils.addClass(htmlDivElement, 'vjs-PlaybackRatesZhiXin-item-active')
        }
        htmlDivElement.onclick = (e) => {
          this.rateCLick(i)
          e.preventDefault()
          e.stopPropagation()
        }
        const htmlDivElement1 = document.createElement('div');
        htmlDivElement.appendChild(htmlDivElement1)
        htmlDivElement1.textContent = i + ''
        this.dialogEL?.appendChild(htmlDivElement)
      })
    }
  }

  /**
   * 这里更新UI
   * @param val
   */
  playbackRatesZhiXin(val?: number[]): number[] | void {
    if (!val) {
      return this.getOptions()
    }
    this.updateDialogEL(val)
    // @ts-ignore
    this.options_ = val
  }
}
